<template>
  <div>
    <Header></Header>
    <!--侧边栏二级菜单-->
    <div class="content">
      <div class="site-category">
        <ul>
          <li v-for="(li,i) in lis" :key="i">
            <a href>{{li.msg}}</a>
            <span class="iconfont iconiconfonti"></span>
            <div>
              <div v-for="(liImg,i) in li.liImgs" :key="i">
                <a href>
                  <img :src="liImg.url" />
                  <span>{{liImg.title}}</span>
                </a>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 轮播 -->
      <div class="el_carousel">
        <el-carousel :interval="5000" :height="height">
          <el-carousel-item v-for="(item,i) in banners" :key="i">
            <img :src="item" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 轮播下面 -->
    <div class="sub">
      <div class="sub-row">
        <div class="sub-list">
          <div>
            <div class="iconfont icondaojishi"></div>
            <a href>小米秒杀</a>
          </div>
          <div>
            <div class="iconfont icontuangou"></div>
            <a href>企业团购</a>
          </div>
          <div>
            <div class="iconfont iconF"></div>
            <a href>F码通道</a>
          </div>
          <div>
            <div class="iconfont iconai-SIM"></div>
            <a href>米粉卡</a>
          </div>
          <div>
            <div class="iconfont iconhuangou"></div>
            <a href>以旧换新</a>
          </div>
          <div>
            <div class="iconfont iconhuafei"></div>
            <a href>话费充值</a>
          </div>
        </div>
        <div>
          <a href>
            <img src="../assets/111.jpg" />
          </a>
        </div>
        <div>
          <a href>
            <img src="../assets/222.jpg" />
          </a>
        </div>
        <div>
          <a href>
            <img src="../assets/333.jpg" />
          </a>
        </div>
      </div>

      <div class="title">
        小米闪购
        <button @click="moveRight" id="button_left" class="iconfont iconiconfonti" a></button>
        <button @click="moveLeft" id="button_right" class="iconfont iconiconfonti"></button>
      </div>
      <div class="row">
        <!-- 20:00倒计时 -->
        <div class="time">
          <div>20:00场</div>
          <div>
            <img src="../assets/miaosha.jpg" alt />
          </div>
          <div>距离开始还有</div>
          <div>
            <span id="hour_show">00时</span>
            <em>:</em>
            <span id="minute_show">00分</span>
            <em>:</em>
            <span id="second_show">00秒</span>
          </div>
        </div>
        <ul id="flash_banner" :style="{'left':-245*count+'px'}">
          <li>
            <a href>
              <img src="../assets/flash_banner/1.jpg" />
            </a>
            <a href>
              小米口袋照片打印机
              <span>299元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/2.jpg" />
            </a>
            <a href>
              米兔儿童电话手表
              <span>349元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/3.jpg" />
            </a>
            <a href>
              小米小爱音响Pro黑色
              <span>289元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/4.jpg" />
            </a>
            <a href>
              小米降噪耳机Type-C版
              <span>149元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/5.jpg" />
            </a>
            <a href>
              小米旅行箱青春款黄色
              <span>199元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/6.jpg" />
            </a>
            <a href>
              米家魔方转换器 有线版
              <span>59元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/7.jpg" />
            </a>
            <a href>
              小米路由器4C白色
              <span>59元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/8.jpg" />
            </a>
            <a href>
              高品质多功能头戴耳机
              <span>169元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/9.jpg" />
            </a>
            <a href>
              小米小爱蓝牙音箱
              <span>45元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/10.jpg" />
            </a>
            <a href>
              最生活毛巾Air(10条)
              <span>99元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/11.jpg" />
            </a>
            <a href>
              米兔儿童书包
              <span>169元</span>
            </a>
          </li>

          <li>
            <a href>
              <img src="../assets/flash_banner/12.jpg" />
            </a>
            <a href>
              小米小爱触屏音响
              <span>199元</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class='row1'>
       <a >
        <img src="../assets/home-banner1.jpg" alt />
      </a>
      <h2>手机</h2>
       <div>
        <a >
          <img src="../assets/row1/row1-left.jpg" alt />
        </a>
      </div>
      <MyList :name='PhoneList'></MyList>
    </div>

    <div class='row1'>
       <a >
        <img src="../assets/home-banner2.jpg" alt />
      </a>
      <h2>电视</h2>
       <div>
        <a >
          <img src="../assets/row2/row2-left.jpg" alt />
        </a>
      </div>
      <MyList :name='TvList'></MyList>
    </div>

    <div class='row1'>
       <a >
        <img src="../assets/home-banner3.jpg" alt />
      </a>
      <h2>手机壳</h2>
       <div>
        <a >
          <img src="../assets/row3/row3-left.jpg" alt />
        </a>
      </div>
      <MyList :name='PjList'></MyList>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import MyList from "@/components/MyList.vue";

export default {
  data() {
    return {
      PhoneList:[],
      TvList:[],
      PjList:[],
      //图片左右移动
      count: -1,
      // 侧边栏
      lis: [
        {
          msg: "手机 电话卡",
          liImgs: [
            { url: require("../assets/small1/1.jpg"), title: "Resmi K30 4G" },
            { url: require("../assets/small1/2.jpg"), title: "小米9Prp 5G" },
            { url: require("../assets/small1/3.jpg"), title: "小米Mix 3" },
            {
              url: require("../assets/small1/4.jpg"),
              title: "Redmi Node 8 Pro"
            },
            { url: require("../assets/small1/5.jpg"), title: "黑鲨手机2 Pro" },
            { url: require("../assets/small1/6.jpg"), title: "小米CC9 Pro" },
            { url: require("../assets/small1/7.jpg"), title: "Redmi Node 8" },
            { url: require("../assets/small1/8.jpg"), title: "Redmi 7A" },
            { url: require("../assets/small1/9.jpg"), title: "Redmi 8A" },
            { url: require("../assets/small1/10.jpg"), title: "小米CC9" },
            {
              url: require("../assets/small1/11.jpg"),
              title: "Redmi Node 7Pro"
            },
            { url: require("../assets/small1/12.jpg"), title: "Redmi 8" },
            {
              url: require("../assets/small1/13.jpg"),
              title: "小米CC 美图定制版"
            },
            { url: require("../assets/small1/14.jpg"), title: "Redmi 8Pro" },
            { url: require("../assets/small1/15.jpg"), title: "小米MIX" },
            { url: require("../assets/small1/16.jpg"), title: "小米CC9e" }
          ]
        },
        {
          msg: "电视 盒子",
          liImgs: [
            {
              url: require("../assets/small2/1.jpg"),
              title: "小米电视5 55英寸"
            },
            {
              url: require("../assets/small2/2.jpg"),
              title: "Redmi 红米电视70英寸"
            },
            {
              url: require("../assets/small2/3.jpg"),
              title: "小米电视4A 43英寸"
            },
            {
              url: require("../assets/small2/4.jpg"),
              title: "小米电视4C 32英寸"
            },
            {
              url: require("../assets/small2/5.jpg"),
              title: "小米电视5 65英寸"
            },
            {
              url: require("../assets/small2/6.jpg"),
              title: "全面屏电视Pro65英寸"
            },
            {
              url: require("../assets/small2/7.jpg"),
              title: "小米电视4A 49英寸"
            },
            {
              url: require("../assets/small2/8.jpg"),
              title: "小米电视4C 40英寸"
            },
            {
              url: require("../assets/small2/9.jpg"),
              title: "小米电视5 75英寸"
            },
            {
              url: require("../assets/small2/10.jpg"),
              title: "全面屏电视Pro 55英寸"
            },
            {
              url: require("../assets/small2/11.jpg"),
              title: "小米电视4A 50英寸"
            },
            {
              url: require("../assets/small2/12.jpg"),
              title: "小米电视4C 43英寸"
            },
            {
              url: require("../assets/small2/13.jpg"),
              title: "小米CC 美图定制版"
            },
            {
              url: require("../assets/small2/14.jpg"),
              title: "小米电视5Pro 55英寸"
            },
            {
              url: require("../assets/small2/15.jpg"),
              title: "小米壁画电视65英寸"
            },
            {
              url: require("../assets/small2/16.jpg"),
              title: "小米电视4A 55英寸"
            }
          ]
        },
        {
          msg: "笔记本 显示器 平板",
          liImgs: [
            { url: require("../assets/small3/1.jpg"), title: "RedmiBook 13 " },
            {
              url: require("../assets/small3/2.jpg"),
              title: "RedmiBook 13.2 "
            },
            { url: require("../assets/small3/3.jpg"), title: "RedmiBook 15.6" },
            { url: require("../assets/small3/4.jpg"), title: "小米游戏本" },
            {
              url: require("../assets/small3/5.jpg"),
              title: "小米笔记本 13.3"
            },
            { url: require("../assets/small3/6.jpg"), title: "小米显示器" },
            { url: require("../assets/small3/7.jpg"), title: "小米平板4 " },
            { url: require("../assets/small3/8.jpg"), title: "鼠键" },
            { url: require("../assets/small3/9.jpg"), title: "转接器" },
            { url: require("../assets/small3/10.jpg"), title: "小米冰箱" },
            { url: require("../assets/small3/11.jpg"), title: "立式空调" },
            { url: require("../assets/small3/12.jpg"), title: "显示器" },
            { url: require("../assets/small3/13.jpg"), title: "小米平板5" },
            { url: require("../assets/small3/14.jpg"), title: "鼠标" },
            { url: require("../assets/small3/15.jpg"), title: "扫地机器人" },
            { url: require("../assets/small3/16.jpg"), title: "电磁炉" }
          ]
        },
        {
          msg: "家电插线板",
          liImgs: [
            { url: require("../assets/small4/1.jpg"), title: "冰箱 " },
            { url: require("../assets/small4/2.jpg"), title: "立式空调 " },
            { url: require("../assets/small4/3.jpg"), title: "壁挂空调" },
            { url: require("../assets/small4/4.jpg"), title: "滚筒洗衣机" },
            {
              url: require("../assets/small4/5.jpg"),
              title: "全自动波轮洗衣机"
            },
            { url: require("../assets/small4/6.jpg"), title: "净水器" },
            { url: require("../assets/small4/7.jpg"), title: "电暖气 " },
            { url: require("../assets/small4/8.jpg"), title: "电烤箱" },
            { url: require("../assets/small4/9.jpg"), title: "扫地机器人" },
            { url: require("../assets/small4/10.jpg"), title: "吸尘器" },
            { url: require("../assets/small4/11.jpg"), title: "客气净化器" },
            { url: require("../assets/small4/12.jpg"), title: "电饭煲" },
            { url: require("../assets/small4/13.jpg"), title: "电磁炉" },
            { url: require("../assets/small4/14.jpg"), title: "电水壶" },
            { url: require("../assets/small4/15.jpg"), title: "电煮壶" },
            { url: require("../assets/small4/16.jpg"), title: "落地风扇" }
          ]
        },
        {
          msg: "出行 穿戴",
          liImgs: [
            { url: require("../assets/small5/1.jpg"), title: "小米手表" },
            { url: require("../assets/small5/2.jpg"), title: "手环手表" },
            { url: require("../assets/small5/3.jpg"), title: "VR" },
            { url: require("../assets/small5/4.jpg"), title: "平衡车" },
            { url: require("../assets/small5/5.jpg"), title: "滑板车" },
            { url: require("../assets/small5/6.jpg"), title: "自行车" },
            { url: require("../assets/small5/7.jpg"), title: "车载充电器 " },
            { url: require("../assets/small5/8.jpg"), title: "平衡车配件" },
            { url: require("../assets/small5/9.jpg"), title: "智能后视镜" },
            { url: require("../assets/small5/10.jpg"), title: "智能记录仪" },
            { url: require("../assets/small5/11.jpg"), title: "无限车充" },
            { url: require("../assets/small5/12.jpg"), title: "充气宝" },
            { url: require("../assets/small5/13.jpg"), title: "平衡轮" },
            { url: require("../assets/small5/14.jpg"), title: "石英表" },
            { url: require("../assets/small5/15.jpg"), title: "打印机" },
            { url: require("../assets/small5/16.jpg"), title: "喷墨打印机" }
          ]
        },
        {
          msg: "智能 路由器",
          liImgs: [
            { url: require("../assets/small6/1.jpg"), title: "喷墨打印机墨水" },
            { url: require("../assets/small6/2.jpg"), title: "小米音响Pro " },
            { url: require("../assets/small6/3.jpg"), title: "智能家庭 15.6" },
            { url: require("../assets/small6/4.jpg"), title: "对讲机" },
            { url: require("../assets/small6/5.jpg"), title: "摄像头" },
            { url: require("../assets/small6/6.jpg"), title: "照相机" },
            { url: require("../assets/small6/7.jpg"), title: "智能门锁 " },
            { url: require("../assets/small6/8.jpg"), title: "视频门铃" },
            { url: require("../assets/small6/9.jpg"), title: "小爱老师" },
            { url: require("../assets/small6/10.jpg"), title: "Redmi 路由器" },
            { url: require("../assets/small6/11.jpg"), title: "小爱音响" },
            {
              url: require("../assets/small6/12.jpg"),
              title: "云服务空间年卡"
            },
            { url: require("../assets/small6/13.jpg"), title: "车充" },
            { url: require("../assets/small6/14.jpg"), title: "无线充" },
            { url: require("../assets/small6/15.jpg"), title: "电池" },
            { url: require("../assets/small6/16.jpg"), title: "自拍杆" }
          ]
        },
        {
          msg: "电源 配件",
          liImgs: [
            { url: require("../assets/small7/1.jpg"), title: "小米充电宝" },
            { url: require("../assets/small7/2.jpg"), title: "数据线 " },
            { url: require("../assets/small7/3.jpg"), title: "车充" },
            { url: require("../assets/small7/4.jpg"), title: "小米无限充" },
            { url: require("../assets/small7/5.jpg"), title: "电池" },
            { url: require("../assets/small7/6.jpg"), title: "小米自拍杆" },
            { url: require("../assets/small7/7.jpg"), title: "小米手机壳 " },
            { url: require("../assets/small7/8.jpg"), title: "手机贴膜" },
            { url: require("../assets/small7/9.jpg"), title: "手机支架" },
            { url: require("../assets/small7/10.jpg"), title: "小黑鲨配件" }
          ]
        },
        {
          msg: "健康 儿童",
          liImgs: [
            { url: require("../assets/small8/1.jpg"), title: "剃须刀" },
            { url: require("../assets/small8/2.jpg"), title: "日光镜" },
            { url: require("../assets/small8/3.jpg"), title: "电动牙刷" },
            { url: require("../assets/small8/4.jpg"), title: "出风机" },
            { url: require("../assets/small8/5.jpg"), title: "体重秤" },
            { url: require("../assets/small8/6.jpg"), title: "体脂秤" },
            { url: require("../assets/small8/7.jpg"), title: "早教启智 " },
            { url: require("../assets/small8/8.jpg"), title: "遥控电动" },
            { url: require("../assets/small8/9.jpg"), title: "转接器" },
            { url: require("../assets/small8/10.jpg"), title: "小米冰箱" },
            { url: require("../assets/small8/11.jpg"), title: "益智积木" },
            { url: require("../assets/small8/12.jpg"), title: "婴儿推车" },
            { url: require("../assets/small8/13.jpg"), title: "儿童书包" },
            { url: require("../assets/small8/14.jpg"), title: "婴儿理发器" },
            { url: require("../assets/small8/15.jpg"), title: "儿童保温杯" }
          ]
        },
        {
          msg: "耳机 音响",
          liImgs: [
            { url: require("../assets/small9/1.jpg"), title: "线控耳机黑色" },
            { url: require("../assets/small9/2.jpg"), title: "线控耳机白色" },
            { url: require("../assets/small9/3.jpg"), title: "小米音响白色" },
            { url: require("../assets/small9/4.jpg"), title: "小爱触屏音响" },
            {
              url: require("../assets/small9/5.jpg"),
              title: "小米圈铁四单元耳机黑色"
            },
            {
              url: require("../assets/small9/6.jpg"),
              title: "小米无限蓝牙耳机"
            },
            {
              url: require("../assets/small9/7.jpg"),
              title: "小米运动蓝牙耳机"
            },
            {
              url: require("../assets/small9/8.jpg"),
              title: "小米圈铁四单元耳机黑色"
            }
          ]
        },
        {
          msg: "生活 箱包",
          liImgs: [
            {
              url: require("../assets/small10/1.jpg"),
              title: "小米旅行箱20英寸"
            },
            {
              url: require("../assets/small10/2.jpg"),
              title: "小米旅行箱24英寸"
            },
            {
              url: require("../assets/small10/3.jpg"),
              title: "RedmiBook 15.6"
            },
            { url: require("../assets/small10/4.jpg"), title: "小米背包黄色" },
            { url: require("../assets/small10/5.jpg"), title: "小米雨伞" }
          ]
        }
      ],
      //轮播
      banners: [
        require("../assets/banner-slide1.jpg"),
        require("../assets/banner-slide2.jpg"),
        require("../assets/banner-slide3.jpg"),
        require("../assets/banner-slide4.jpg"),
        require("../assets/banner-slide5.jpg")
      ],
      height: "470px"
    };
  },
   components: {
    Header,
    Footer,
    MyList
  },
   mounted() {
    this.$http.get("/product").then(res => {
      //  console.log(res.data);
      for (var i = 0; i < res.data.length; i++) {
        if (res.data[i].cateid == 1) {        
          this.PhoneList.push(res.data[i]);
        }
        if (res.data[i].cateid == 2) {
          this.TvList.push(res.data[i]);
        }
        if (res.data[i].cateid == 5) {
          this.PjList.push(res.data[i]);
        }
      }
      console.log(this.PhoneList);
    });
  },
  methods: {
    moveLeft() {
      if (this.count < 8) {
        this.count++;
      }
    },
    moveRight() {
      if (this.count >= 0) {
        this.count--;
      }
    }
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.header {
  width: 100%;
  height: 40px;
  background: #333;
}
.header > .site-topbar {
  width: 1200px;
  height: 100px;
  margin: 0 auto;
}
.header > .site-topbar > .container {
  width: 1200px;
  height: 40px;
}
/*左边*/
.header > .site-topbar > .container > .site-topbar-left {
  width: 75%;
  height: 40px;
  float: left;
}
.header > .site-topbar > .container > .site-topbar-left > li,
.header > .site-topbar > .container > .site-topbar-right > li {
  float: left;
}
.header > .site-topbar > .container > .site-topbar-left > li > a,
.header > .site-topbar > .container > .site-topbar-right > li > a {
  display: inline-block;
  font-size: 12px;
  color: #b0b0b0;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding-right: 5px;
}
.header > .site-topbar > .container > .site-topbar-left > li + li {
  margin-left: 5px;
}
.header > .site-topbar > .container > .site-topbar-left > li + li:before,
.header > .site-topbar > .container > .site-topbar-right > li + li:before {
  content: "| ";
  opacity: 0.2;
  color: #b0b0b0;
  display: inline;
  margin-right: 5px;
}
/*右边*/
.header > .site-topbar > .container > .site-topbar-right {
  float: right;
  height: 40px;
}
.header
  > .site-topbar
  > .container
  > .site-topbar-right
  > li:last-child
  > span {
  color: gray;
  font-size: 30px;
}
/* 搜索 */
.search {
  margin: 0 auto;
  width: 1400px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.search > ul {
  display: flex;
  justify-content: space-around;
}
.search > ul > li {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.search > ul > li > a {
  color: #333;
}
.search > ul > li > a:hover {
  color: #ff6700;
}
.search input {
  width: 260px;
  height: 40px;
  border: 1px solid #e0e0e0;
  outline: 0;
  font-size: 16px;
  padding-left: 10px;
}
.search > div span {
  position: relative;
  top: 7px;
  left: -33px;
  font-size: 32px;
}
.search > ul > li > ul {
  width: 1400px;
  height: 0;
  position: absolute;
  opacity: 0;
  top: 100px;
  left: 0;
  border-top: 1px solid #fff;
  z-index: 20;
  background-color: #fff;
  overflow: hidden;
  transition: all 0.2s linear;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.search > ul > li > ul > li > a {
  margin-top: 20px;
  display: block;
  height: 102px;
}
.search > ul > li > ul > li > p {
  line-height: 16px;
}
.search > ul > li > ul > li > p:nth-child(2) {
  margin-top: 10px;
}
.search > ul > li > ul > li > p:nth-child(2) > a {
  font-size: 14px;
  color: #333;
}
.search > ul > li > ul > li > p:nth-child(3) > a {
  font-size: 14px;
  color: #ff6700;
}
.search > ul > li:hover {
  cursor: pointer;
}
.search > ul > li:hover > ul {
  top: 100px;
  left: 0;
  height: 200px;
  position: absolute;
  border-top: 1px solid #e0e0e0;
  opacity: 1;
}

/*导航*/
.content {
  width: 1200px;
  height: 470px;
  margin: 0 auto;
  position: relative;
}
.content > .site-category {
  position: absolute;
  width: 234px;
  height: 450px;
  z-index: 100;
  background: rgba(105, 101, 101, 0.6);
  padding-top: 20px;
}
.content > .site-category > ul {
  list-style: none;
}
.content > .site-category > ul > li {
  width: 209px;
  height: 42px;
  font-size: 14px;
  text-align: left;
  padding-left: 25px;
  line-height: 42px;
}
.content > .site-category > ul > li:hover {
  background-color: #ff6700;
}
.content > .site-category > ul > li:hover > div {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  align-content: flex-start;
}
.content > .site-category > ul > li > div {
  position: absolute;
  width: 966px;
  height: 470px;
  background-color: #fff;
  left: 234px;
  top: 0;
  display: none;
}
/*设置flex-wrap:wrap;后出现断行
(解决:添加align-content: flex-start; )*/
.content > .site-category > ul > li > a {
  color: #fff;
}
.content > .site-category > ul > li > span {
  position: absolute;
  font-size: 20px;
  color: #ccc;
  right: 25px;
  font-weight: bolder;
}
.content > .site-category > ul > li > div > div {
  width: 200px;
  height: 40px;
  padding: 20px;
}
.content > .site-category > ul > li > div > div > a {
  display: block;
  height: 80px;
}
.content > .site-category > ul > li > div > div > a > img {
  width: 40px;
  float: left;
}
.content > .site-category > ul > li > div > div > a > span {
  float: left;
  vertical-align: middle;
  color: #333;
  padding-left: 5px;
}
.content > .site-category > ul > li > div > div > a > span:hover {
  color: #ff6700;
}
/*轮播*/

/* 轮播下面  */
.sub {
  width: 1200px;
  margin: 0 auto;
}
.sub > .sub-row {
  height: 170px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.sub > .sub-row a {
  display: block;
}
.sub > .sub-row > .sub-list {
  width: 234px;
  height: 170px;
  background-color: #5f5750;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.sub > .sub-row > .sub-list > div {
  width: 76px;
  height: 82px;
  margin-top: 10px;
}
.sub > .sub-row > .sub-list > div > div {
  text-align: center;
  color: #fff;
  font-size: 26px;
}
.sub > .sub-row > .sub-list > div > a {
  margin-top: 18px;
  display: block;
  color: #ccc;
  font-size: 14px;
  text-align: center;
}
.sub > .title {
  height: 58px;
  color: #333;
  position: relative;
  font-size: 22px;
  line-height: 58px;
}
.sub > .title button {
  width: 36px;
  height: 24px;
  position: absolute;
  top: 15px;
  right: 35px;
  color: #b0b0b0;
  border: 1px solid #e0e0e0;
  outline: none;
}
.sub > .title button:hover {
  color: #ff6700;
}
.sub > .title button:first-child {
  transform: rotate(180deg);
}
.sub > .title button:nth-child(2) {
  right: 0px;
}
.sub > .row {
  height: 290px;
  position: relative;
  overflow: hidden;
}
.sub > .row > div.time {
  width: 220px;
  height: 290px;
  margin-right: 19px;
  background: #f1eded;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}
.sub > .row > div.time > div {
  text-align: center;
  margin: 20px auto;
}
.sub > .row > div.time > div:first-child {
  font-size: 22px;
  color: #ef3a3d;
}
.sub > .row > div.time > div:nth-child(3) {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.54);
}
.sub > .row > div.time > div:last-child {
  margin: 0 auto;
  width: 80%;
  display: flex;
  justify-content: space-between;
}
.sub > .row > div.time > div:last-child > span {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #605751;
  color: #fff;
}
.sub > .row > div.time > div:last-child > em {
  width: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #605751;
  font-size: 28px;
  font-style: normal;
}
.sub > .row > ul {
  width: 9999px;
  height: 290px;
  position: absolute;
  left: 230px;
  top: 0;
}
.sub > .row > ul > li {
  width: 220px;
  height: 290px;
  float: left;
  background-color: #fff;
}

.sub > .row > ul > li + li {
  margin-left: 25px;
}
.sub > .row > ul > li a {
  display: block;
  text-align: center;
  color: #666;
}
.sub > .row > ul > li a > span {
  color: red;
}
/* 手机电脑手机壳 */
.row1 {
  width: 1200px;
  height: 800px;
  margin:  0 auto;
}
.row1 > a {
  display: block;
  margin-top: 20px;
  width: 1200px;
}
.row1 > a > img {
  width: 1200px;
  height: 120px;
}
.row1 > div {
  float: left;
  width: 230px;
  height: 607px;
}
.row1 > div > a {
  display: block;
}
.row1 > div > a > img {
  width: 230px;
  height: 607px;
}
/* // */
.main-box {
  background-color: #f5f5f5;
  margin: 0 auto;
  max-width: 1200px;
  padding-bottom: 20px;
}
.H-title {
  width: 1200px;
  height: 663px;
}
.box-hd {
  height: 58px;
  margin: 20px 0 0 0;
}
.box-hd .title {
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}
.box-bd {
  height: 615px;
}
.box-bd .promo-list {
  float: left;
  height: 615px;
  width: 234px;
}
.box-bd .promo-list a {
  display: block;
}
.box-bd .promo-list img {
  float: left;
  width: 234px;
  height: 615px;
  background: red;
}
.box-bd .list {
  float: left;
  width: 966px;
  height: 615px;
}
.myList ul li {
  z-index: 1;
  float: left;
  width: 234px;
  height: 280px;
  padding: 10px 0;
  margin: 0 0 14.5px 13.7px;
  background-color: white;
  transition: all 0.2s linear;
  position: relative;
}
.myList #more {
  text-align: center;
  line-height: 280px;
}
.myList #more a {
  font-size: 18px;
  color: #333;
}
.myList #more a:hover {
  text-decoration: none;
}
.el-icon-d-arrow-right::before {
  content: "\e6dc";
}
</style>
<style>
.el-carousel__arrow--left {
  left: 250px !important;
}
</style>
